<template>
	<view v-if="btnType=='btn1'" class="base-bottom-tab-n-main">
		<view class="bind-phone" v-if="bindModel && !loginInfo?.phone" :class="{'z-1114': isShadowShow}">
			<view class="bind-bg">
				<image class="img" src="/static/image/bindPhone.png" mode="aspectFit"></image>
			</view>
			<view class="bing-text">当前尚未补充手机号码，为了更方便为您提供售后服务，请补充您的手机号码</view>
			<button class="bind-btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">立即绑定</button>
			<view v-if="isClose" class="close" @click="bindModel=false"><span class="iconfont icon-guanbi"></span></view>
		</view>
		<view v-if="isShadowShow" class="share-shadow"></view>
	</view>
	<view v-else-if="btnType=='btn2'" class="btn-index-my">
		<button class="bind-btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">绑定手机号<span class="iconfont right-icon icon-xiangyou"></span></button>
	</view>
	<view v-else-if="btnType=='btn3'" class="btn-index-my3">
		<button class="bind-btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">绑定手机号<span class="iconfont right-icon icon-xiangyou"></span></button>
	</view>
</template>

<script>
	import {wxBindPhone} from '@/api/index.js'
	export default {
		name:"",
		props: {
			btnType: {
				type: String,
				default: 'btn1'
			},
			isShadowShow: {
				type: Boolean,
				default: false
			},
			isClose: {
				type: Boolean,
				default: true
			},
			channelId: {
				type: String,
				default: ''
			},
			pid: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				bindModel: true,
			};
		},
		computed: {
			loginInfo() {
				return this.$store.state.loginInfo;
			},
		},
		mounted(){
			console.log(this.btnType,'------42')
		},
		methods: {
			getphonenumber(e){
				console.log(e,'----------66')
				// #ifdef MP-WEIXIN
				if(!e.detail.code){
					uni.showToast({title: '取消授权',icon: 'none'});
					return
				}
				let openid=this.$store.state.openid;
				const params = {
					code: e.detail.code,
					openid
				}
				if (this.channelId) {
					params.channelId= this.channelId
				}
				if (this.pid) {
					params.pid = this.pid
				}

				wxBindPhone(params).then(res=>{
					if(res.token){
						this.$store.commit('updateToken', res.token);
					}
					if(res.user){
						this.$store.commit('set', ['openid','']);
						this.$store.commit('updateLoginInfo', res.user);
					}
					this.$store.dispatch('getKeMu');
					uni.showModal({
						title:"温馨提示",
						content:"绑定成功",
						showCancel: false,
						success: (res)=>{
							if (res.confirm) {
								console.log('用户点击确定');
								this.bindModel=false;
								this.$emit('callback')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.base-bottom-tab-n-main{
		position: relative;
		z-index: 1;
		.bind-phone{
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 28rpx;
			right: 28rpx;
			z-index: 1;
			padding: 11rpx 0 11rpx 14rpx;
			overflow: hidden;
			border-radius: 8rpx;
			background: linear-gradient(90deg, #6DB5FD 0%, #4081F7 100%);
			&.z-1114{
				z-index: 1114;
			}
			.bind-bg{
				width: 102rpx;
				height: 102rpx;
				margin-right: 38rpx;
				border-radius: 50%;
				border: 10rpx solid rgba(255,255,255,.39);
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.bing-text{
				width: 352rpx;
				margin-right: 30rpx;
				font-size: 22rpx;
				color: #fff;
			}
			.bind-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 132rpx;
				height: 48rpx;
				padding: 0;
				background-color: #fff;
				border-radius: 24rpx;
				font-size: 24rpx;
				color: #4081F7;
			}
			.close{
				position: absolute;
				top: -5rpx;
				right: 10rpx;
				color: #fff;
				.iconfont{
					font-size: 16rpx;
				}
			}
		}
	}
	.btn-index-my{
		.bind-btn{
			display: flex;
			align-items: center;
			padding: 0;
			font-size: 24rpx;
			color: #fff;
			background: none;
		}
		.iconfont{
			margin-left: 8rpx;
			font-size: 20rpx;
		}
	}
	.share-shadow{
		position: fixed;
		z-index: 1111;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.5);
	}
	.btn-index-my3{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>